<!DOCTYPE html>
<style>
    .test {
        width: 100px;
        height: 100px;
    }

    .left { border-left: 50px solid blue; }
    .right { border-right: 50px solid blue; }

    .test div {
        width: 100px;
        height: 50px;
        background-color: orange;
        position: relative;
        top: 25px;
    }
</style>
<p>There should be a 50px blue border to the left of an orange rectangle:</p>
<div class="test left"><div></div></div>
<p>There should be a 50px blue border to the right of an orange rectangle:</p>
<div class="test right"><div></div></div>
